<template>
<div id="head">
  <div class="" style="background: linear-gradient(90deg,#1d42ab,#2173dc,#1e93ff)!important">
    <div class="head-menu" style="background-image:url('/static/img/HomeIcon.png');background-repeat: no-repeat;">&emsp;</div>
    <div class="head-menu" @click="$router.push('/Home')"><i class="bi bi-house"></i> 首页</div>
    <div class="head-menu" @click="$router.push('/Shop')"><i class="bi bi-shop-window"></i> 店内</div>
    <div class="head-menu" @click="$router.push('/Goods')"><i class="bi bi-handbag"></i> 商品</div>
    <div class="head-menu" @click="$router.push('/User')"><i class="bi bi-person-lines-fill"></i> 用户</div>
<!--    <div class="head-menu" @click="$router.push('/Finance')"><i class="bi bi-coin"></i> 财务</div>-->
    <div class="head-menu" @click="$router.push('/Data')"><i class="bi bi-grid-1x2"></i> 数据</div>
    <div class="head-menu" @click="$router.push('/Settings')"><i class="fa fa-cog"></i> 设置</div>
    <div class="head-menu" @click="$router.push('/')" style="float: right"><i class="bi bi-person-circle"></i> 用户操作</div>
  </div>
</div>
</template>

<script>
    export default {
        name: "Header",
      methods:{

      }
    }

</script>

<style scoped>
  #head{
    position:fixed;
    top: 0%;
    width: 100%;
    z-index: 99999
  }
  .head-menu{
    position: relative;
    top: 0;
    display: inline-block;
    width: 100px;
    height: 3.74rem;
    text-align: center;
    line-height: 3.7rem;
    cursor: pointer;
    color: white;
  }
  .head-menu:hover{
    color: black;
    background-color: white;
  }
  .head-menu:hover:nth-of-type(1){
    color: black;
    background: none;
  }
</style>
